<!DOCTYPE html>
<html lang="en">

<head>
    <title>立即抽奖</title>
    <#include "/dt/components/meta.html" />
    <#include "/dt/components/stylesheets.html" />
    <link rel="stylesheet" href="/dt/stylesheets/luckyDraw.css?v=6">
</head>

<body>
    <div id="app">
        <div class="top">
            <img src="https://i.loli.net/2018/09/14/5b9b8f08ccad2.png" />
        </div>
        <div class="draw">
            <div id="wheel"></div>
        </div>
        <div class="info">
            <div class="info-wrap">
                <div class="info-header">
                    <span>活动备注:</span>
                </div>
                <div class="info-body am-g am-g-collapse">
                    <div class="am-u-sm-1">1、</div><div class="am-u-sm-11">10题全部答对即可参与抽奖，100%中奖率；（违规操作情况除外）</div>
                    <div class="am-u-sm-1">2、</div><div class="am-u-sm-11">奖品图片仅供参考，实际奖品以现场兑换实物为准；</div>
                    <div class="am-u-sm-1">3、</div><div class="am-u-sm-11">本活动一切最终解释权归本次活动方所有；</div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <a href="http://www.zhen-yee.com/">此网站由 珠海蓁奕互联网科技有限公司 开发</a>
        </div>
        <div class="am-modal am-modal-no-btn modal" tabindex="-1" id="doc-modal-1">
            <div class="am-modal-dialog dialog">
                <div class="am-modal-hd">
                </div>
                <div class="am-modal-bd body theme-background-color1">
                    <img class="dialog-bg" src="https://i.loli.net/2018/09/14/5b9b8f08e1eb4.png" />
                    <div class="dialog-top">恭喜获得</div>
                    <div class="product">${prize.content!}</div>
                    <div class="form">
                        <div class="form-title">请填写您的兑奖信息</div>
                        <!-- <div class="am-g am-g-collapse form-item">
                            <div class="am-u-sm-3 label">
                                <span>微信号：</span>
                            </div>
                            <div class="am-u-sm-9 input">
                                <input type="text" v-model="weixin" />
                            </div>
                        </div> -->
                        <div class="am-g am-g-collapse form-item">
                            <div class="am-u-sm-3 label">
                                <span>姓　名：</span>
                            </div>
                            <div class="am-u-sm-9 input">
                                <input type="text" v-model="name" placeholder="姓名仅供活动方联系" />
                            </div>
                        </div>
                        <div class="am-g am-g-collapse form-item">
                            <div class="am-u-sm-3 label">
                                <span>电　话：</span>
                            </div>
                            <div class="am-u-sm-9 input">
                                <input type="number" v-model="mobile" placeholder="请务必填写有效电话" />
                            </div>
                        </div>
                        <div class="am-g am-g-collapse form-item">
                            <div class="am-u-sm-3 label">
                                <span>地　址：</span>
                            </div>
                            <div class="am-u-sm-9 input">
                                <textarea rows="2" v-model="address" placeholder="地址选填"></textarea>
                            </div>
                        </div>
                        <div class="form-info">
                            <span>（在提交兑奖信息后，系统将自动生成一个核销码）<br />请在兑奖时，向活动单位工作人员当面出示核销码页面进行现场核销，方可生效。</span>
                        </div>
                        <div class="form-button">
                            <button class="am-btn am-btn-default theme-color1" @click="submit">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#include "/dt/components/scripts.html" />
    <#include "/dt/components/wxConfig.html" />
    <script type="text/javascript" src="/dt/js/jquery.wheelOfFortune.js"></script>
    <script type="text/javascript" src="/dt/js/jquery.rotate.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                weixin: '',
                name: '',
                mobile: '',
                address: ''
            }
        },
        mounted: function() {},
        methods: {
            submit() {
                var self = this;
                loading();
                var param = Qs.stringify({
                    name: self.name,
                    mobile: self.mobile,
                    address: self.address
                });
                axios({
                    url: '/dt/submitInfo',
                    method: 'post',
                    data: param,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(function(response) {
                    endLoading();
                    if (response.data.status == 200) {
                        window.location.href = "/dt/information";
                    }
                })
                .catch(function(error) {
                    endLoading();
                });
            }
        }
    })
    </script>
    <script type="text/javascript">
    $("#wheel").wheelOfFortune({
        // 'wheelImg': "https://i.loli.net/2018/09/14/5b9b8f091a362.png", //转轮图片
        'wheelImg': "https://i.loli.net/2018/09/15/5b9c9e802a88b.png",
        'pointerImg': "https://i.loli.net/2018/09/14/5b9b8f08d72ec.png", //指针图片
        'buttonImg': "https://i.loli.net/2018/09/14/5b9b8f08d72ec.png", //开始按钮图片
        'wSide': 280, //转轮边长(默认使用图片宽度)
        'pSide': 100, //指针边长(默认使用图片宽度)
        'bSide': 100, //按钮边长(默认使用图片宽度)
        //'items': { 2: [41, 128], 3: [129, 219], 4: [220, 310], 1: [311, 400] }, //奖品角度配置{键:[开始角度,结束角度],键:[开始角度,结束角度],......}
        'items': { 4: [0, 90], 3: [90, 180], 1: [180, 270], 2: [270, 360] },
        'pAngle': 270, //指针图片中的指针角度(x轴正值为0度，顺时针旋转 默认0)
        //'type': 'w', //旋转指针还是转盘('p'指针 'w'转盘 默认'p')
        'fluctuate': 0, //停止位置距角度配置中点的偏移波动范围(0-1 默认0.8)
        'rotateNum': 30, //转多少圈(默认12)
        'duration': 5000, //转一次的持续时间(默认5000)
        'click': function() {
            //var key = parseInt(Math.random() * 4) + 1;
            var key = '${prize.id!}'
            $("#wheel").wheelOfFortune('rotate', key, 'w');
        }, //点击按钮的回调
        'rotateCallback': function(key) {
            if (true) {
                // 打开中奖窗口
                var $modal = $('#doc-modal-1');
                $modal.modal({
                    closeViaDimmer: false
                });
            }
        }
    })
    </script>
    <script>
    wx.ready(function() {
        initWXShare()
    })
    </script>
</body>

</html>